<script setup lang="ts">
import DataTree from "@/components/SRComponents/DataTree/index.vue";
import { getMenuTree, SysMenu } from "@/views/domain/admin/api/sysMenu";
import { computed, ref } from "vue";
const props = defineProps<{
  checkable?: boolean;
  menus?: SysMenu[];
  checkedKeys?: any[];
}>();

const treeRef = ref();
const emit = defineEmits(["update:checkedKeys"]);
const selectMenuIds = computed({
  get() {
    return props.checkedKeys || [];
  },
  set(val) {
    emit("update:checkedKeys", val);
  }
});

const onLoadMenuTree = async (
  query: any
): Promise<{ list: any[]; total: number }> => {
  if (props.menus) {
    return { list: props.menus, total: props.menus.length };
  }
  const { data } = await getMenuTree(query);
  return { list: data, total: data.length };
};
</script>

<template>
  <DataTree
    ref="treeRef"
    v-model:checked-keys="selectMenuIds"
    :get-data-list="onLoadMenuTree"
    :data="menus"
    v-bind="props"
    value-field="menuId"
    label-field="title"
  />
</template>
<style lang="scss" scoped></style>
